<script setup>
// 模拟数据
import {nextTick, onMounted} from "vue";
import {ElMessage} from "element-plus";

const code = `
<pre><code class="language-java">public class HelloWorld {
    public static void main(String[] args) {
      System.out.println("Hello, World!");
    }
}</code></pre>
`;

onMounted(async () => {
  // 动态导入插件
  await import('highlightjs-line-numbers.js');
  await nextTick(() => {
    // 获取预编译代码
    document.querySelectorAll("pre code").forEach((block) => {
      // 添加 data-original-code 属性
      block.setAttribute("data-original-code", block.innerHTML);
      // 添加复制按钮
      addCopyBtn(block);
      // 启用语法高亮
      hljs.highlightElement(block);
    });
    // 启用插件渲染行号
    hljs.initLineNumbersOnLoad({
      singleLine: true // 可选，是否只对单行代码进行行号显示
    });
  });
});

const addCopyBtn = (codeBlock) => {
  // 创建父容器元素
  const container = document.createElement("div");
  // 设置成相对定位
  container.style.position = "relative";
  // 把 pre 移动到 container 中
  codeBlock.parentNode.parentNode.insertBefore(container, codeBlock.parentNode);
  container.appendChild(codeBlock.parentNode);
  
  // 创建按钮区域元素
  const copyBtn = document.createElement("div");
  copyBtn.textContent = "复制";
  copyBtn.style.cursor = 'pointer';
  copyBtn.style.fontSize = '12px';
  copyBtn.style.color = '#C7C9D8';
  copyBtn.style.position = 'absolute';
  copyBtn.style.right = '0';
  copyBtn.style.top = '0';
  copyBtn.style.backgroundColor = 'transparent';
  copyBtn.style.padding = '2px 4px';
  // 添加点击事件
  copyBtn.addEventListener('click', async () => {
    const text = codeBlock.getAttribute("data-original-code");
    console.log('代码-->', text)
    try {
      if (navigator.clipboard && navigator.clipboard.writeText) {
        await navigator.clipboard.writeText(text);
      } else {
        // 回退方式
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
      }
      ElMessage({
        message: '复制成功',
        type: 'success',
        duration: 2000
      });
    } catch (err) {
      console.error('复制失败:', err);
    }
  });
  // 插入按钮
  container.appendChild(copyBtn);
};
</script>

<template>
  <div class="v-container">
    <div v-html="code"></div>
  </div>
</template>

<style scoped>
.v-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
}

/*代码行号样式*/
:deep(.hljs-line-numbers) {
  display: table-cell;
  text-align: right;
  color: #888;
  user-select: none;
  padding-right: 10px;
}

/* 行号数字的样式 */
:deep(.hljs-ln-n) {
  color: red;
}
</style>